<template>
  <div class="main-panel" :class="'main-panel-' + placement" @click.self="active = ''">
    <div class="item-wrapper" :style="style" @click.self="active = ''">
      <div
        v-for="application in mainPanelApplications"
        :key="application.id"
        class="item"
        :class="{ 'item-active': active === application.id }"
        @click.stop="active = application.id"
        @dblclick.stop="application.open()"
      >
        <icon :path="application.info.icon" />
        <div class="name">
          {{ application.info.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue"
import { useMainPanelApplications, useMainPanelStyle } from "@/components/desktop/main-panel"
import Icon from "@/components/applications/icon/Icon.vue"
import { useThemeStore } from "../../../stores/theme"
import VariableName from "../../../stores/theme/variable-name"


const mainPanelApplications = useMainPanelApplications()

const { placement } = useMainPanelStyle()

const active = ref("")

const themeStore = useThemeStore()
const dockPlacement = themeStore.getVariableRef(VariableName.Dock.placement)
const dockSize = themeStore.getVariableRef(VariableName.Dock.size)

const style = computed(() => {
  if (dockPlacement.value !== placement.value) {
    return {
      paddingBottom: dockSize.value
    }
  } else {
    if (placement.value === "left") {
      return {
        paddingLeft: dockSize.value
      }
    } else {
      return {
        paddingRight: dockSize.value
      }
    }
  }
})

</script>

<style scoped lang="scss">
$itemSize: var(--main-panel-item-size);
$cellSize: calc($itemSize * 1.6);

.main-panel {
  top: var(--top-bar-size);
  left: 0;
  right: 0;
  bottom: var(--dock-size);
  position: absolute;
  user-select: none;

  .item-wrapper {
    position: absolute;
    height: 100%;
    max-width: 100%;
    padding: 0.2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, $cellSize);
    grid-template-rows: repeat(auto-fill, $cellSize);
    grid-auto-flow: column;
    justify-items: center;
    align-items: center;
    //grid-column-gap: 0.20rem;
    grid-row-gap: 0.2rem;

    .item {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      transition: all 0.1s ease;

      .application-icon {
        --application-icon-size: calc(var(--main-panel-item-size) - 0.05rem);
      }

      .name {
        color: white;
        text-shadow: 1px 1px 1px black;
      }
    }

    .item:hover {
      scale: 1.2;
    }

    .item-active {
      border-radius: 0.1rem;
      background-color: rgba(200, 200, 200, 0.5);
    }
  }
}

.main-panel-left {
  .item-wrapper {
    left: 0;
    top: 0;
  }
}

.main-panel-right {
  .item-wrapper {
    right: 0;
    top: 0;
    direction: rtl;
  }
}
</style>
